﻿@page "/dialog/template"

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Inputs

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This example demonstrates the template functionalities of the Dialog component. The dialog Header and Footer is configured with HTML template. The typed content will be replaced every time when clicking the 'Send' button. </p>
</SampleDescription>
<ActionDescription>
   <p>The Dialog component displays HTML template content on the Header and Footer. The user can set any HTML element as Header and Footer with the usage of content and FooterTemplate properties.</p>
   <p>More information on the modal behavior of Dialog can be found in the<a target="_blank" href="https://blazor.syncfusion.com/documentation/dialog/template/"> documentation section </a>.</p>
</ActionDescription>

<div id="target" class="col-lg-12 control-section" style="height:100%">
    <div>
        @if (this.ShowButton)
        {
            <button class="e-btn" @onclick="@OnBtnclicked">Open</button>
        }
    </div>
    <SfDialog Height="75%" Width="435px" Target="#target" ShowCloseIcon="true" @bind-Visible="Visibility">
        <DialogTemplates>
            <Header>
                <span class="e-avatar template-image e-avatar-xsmall e-avatar-circle"></span>
                <div id="template" title="Nancy" class="e-icon-settings">Nancy</div>
            </Header>
            <Content>
                <div class="dialogContent">
                    <span class="dialogText">@DialogText</span>
                </div>
            </Content>
            <FooterTemplate>
                <SfTextBox ID="inVal" @bind-Value="@TextBoxValue" @ref="TextboxObj" Type="InputType.Text" Placeholder="Enter your message here!" />
                <button id="sendButton" @onclick="@SendBtnclicked" class="e-control e-btn e-primary" data-ripple="true">Send</button>
            </FooterTemplate>
        </DialogTemplates>
        <DialogEvents OnOpen="@DialogOpen" Closed="@DialogClose"></DialogEvents>
    </SfDialog>
</div>

@code{
    SfTextBox TextboxObj;

    private string TextBoxValue;
    private bool Visibility { get; set; } = true;
    private bool ShowButton { get; set; } = false;
    private string DialogText = "Greetings Nancy! When will you share me the source files of the project?";

    private void DialogOpen(Object args)
    {
        this.ShowButton = false;
    }

    private void DialogClose(Object args)
    {
        this.ShowButton = true;
    }

    private void OnBtnclicked()
    {
        this.Visibility = true;
    }

    private void SendBtnclicked()
    {
        if (this.TextboxObj.Value != "")
        {
            DialogText = this.TextboxObj.Value;
            TextBoxValue = "";
            this.StateHasChanged();
        }
    }
}

<style>
    #sendButton {
        top: 2px;
        position: relative;
    }

    .e-footer-content .e-input-group {
        width: 75%;
        float: left;
    }

    .e-bigger.material #sendButton {
        right: 7px;
    }

    .bootstrap button#sendbtn {
        margin-right: 1%;
    }

    #target {
        min-height: 400px;
    }

    .e-dialog .e-dlg-header-content {
        background-color: #3f51b5;
    }

    .fabric .e-dialog .e-dlg-header-content {
        background-color: #0078d7;
    }

    .bootstrap .e-dialog .e-dlg-header-content {
        background-color: #428bca;
    }

    .bootstrap4 .e-dialog .e-dlg-header-content {
        background-color: #007bff;
    }

    .highcontrast .e-dialog .e-dlg-header-content {
        background-color: #ffd939;
    }

    .material.e-bigger .e-dialog .e-footer-content {
        padding-left: 23px;
    }

    .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
        top: 5px;
        left: -11px;
    }

    .e-bigger .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
        top: 3px;
        left: -11px;
    }

    .bootstrap4 .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn,
    .bootstrap4.e-bigger .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
        top: 8px;
    }

    .e-dialog .e-dlg-header {
        position: relative;
    }

    .e-dialog .e-footer-content, .highcontrast.e-bigger .e-dialog .e-footer-content {
        padding: 15px;
    }

    .e-dialog .e-dlg-content {
        padding: 0;
    }

    .fabric #sendButton, .highcontrast #sendButton {
        position: relative;
    }

    .fabric button#sendbtn, .highcontrast button#sendbtn {
        top: -2px;
    }

    .fabric.e-bigger .e-dialog .e-footer-content .e-btn, .highcontrast.e-bigger .e-dialog .e-footer-content .e-btn {
        margin-top: -3px;
    }

    .fabric input.e-input, .highcontrast input.e-input {
        float: left;
        height: 35px;
        width: 70%;
    }

    .e-bigger.highcontrast button#sendbtn {
        margin-right: -17px;
        margin-top: -2%;
    }

    .e-dialog .e-dlg-header-content {
        padding: 6px;
    }

    .e-bigger.e-dialog .e-dlg-header-content, .e-bigger .e-dialog .e-dlg-header-content {
        padding: 8px;
    }

    .e-open-icon::before {
        content: "\e782";
    }

    #template {
        display: inline-block;
        padding: 0px 10px;
        vertical-align: middle;
        height: 40px;
        line-height: 40px;
    }

    input {
        width: 75%;
        float: left;
    }

    .e-bigger.bootstrap input.e-input {
        height: 39px;
    }

    .e-icon-settings.e-icons {
        float: left;
        position: relative;
        left: 14%;
        top: -33px;
    }

    .fabric .e-icon-settings.e-icons, .highcontrast .e-icon-settings.e-icons {
        top: -37px;
    }

    .e-bigger.fabric .e-icon-settings.e-icons, .e-bigger.highcontrast .e-icon-settings.e-icons {
        top: -35px;
    }

    .dialogContent .dialogText {
        font-size: 13px;
        padding: 5%;
        word-wrap: break-word;
        border-radius: 6px;
        text-align: justify;
        font-style: initial;
        display: block;
    }

    .e-dlg-header .e-icon-settings, .e-icon-btn {
        color: #fff;
    }

    .dialogContent .dialogText, .dialogContent .dialogText {
        background-color: #f5f5f5;
    }

    .e-dialog .e-footer-content, .fabric .e-dialog .e-footer-content {
        border-top: 0.5px solid rgba(0, 0, 0, 0.42);
    }

    .highcontrast .e-dialog .e-footer-content, .fabric .e-dialog .e-footer-content {
        padding: 20px 25px;
    }

    .highcontrast .e-dialog .e-footer-content {
        border-top: 0.5px solid #fff;
    }

    .bootstrap4 .e-dialog .e-footer-content {
        border-top: 1px solid #e9ecef;
    }

    .highcontrast .dialogContent .dialogText {
        background-color: rgba(255,255,255,0.20);
    }

    .dialogContent {
        display: block;
        font-size: 15px;
        word-wrap: break-word;
        text-align: center;
        font-style: italic;
        border-radius: 6px;
        padding: 3%;
        position: relative;
        top: 25px;
    }

    .e-bigger.e-dialog .e-dlg-content, .e-bigger .e-dialog .e-dlg-content {
        padding: 0;
    }

    .e-bigger .e-dialog .dialogContent {
        top: 20px;
    }

    .bootstrap .dialogContent {
        top: 7px;
    }

    .control-wrapper .e-control.e-dialog {
        width: 30%;
    }

    .e-dialog .e-dlg-header-content .e-icon-dlg-close {
        color: #fff;
    }

    .fabric .e-dialog .e-btn.e-dlg-closeicon-btn:hover span {
        color: #8ECBFF;
    }

    .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:hover,
    .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:focus {
        background-color: rgba(255,255,255, 0.10);
    }

    .bootstrap4 .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:hover,
    .bootstrap4 .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:focus {
        background-color: transparent;
    }

    .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:active .e-icon-dlg-close,
    .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:focus .e-icon-dlg-close,
    .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn:hover .e-icon-dlg-close {
        color: #fff;
    }

    .e-dialog .e-dlg-header-content .e-dlg-header .e-avatar.template-image {
        background-image: url("https://ej2.syncfusion.com/demos/src/dialog/images/1.png");
        vertical-align: middle;
        display: inline-block;
        width: 36px;
        height: 36px;
    }
</style>